<template>
    <div>
        <hr>
        <Card :stus="stus"></Card>
        <div class="addBtn">
            <el-button size="large" type="primary" @click="openDrawer">新增</el-button>
        </div>
        <el-drawer v-model="show" size="500" title="新增成绩" :with-header="true">
            <Add @addStu="add"></Add>
        </el-drawer>
        
    </div>
</template>

<script>
import { ref } from "vue"
import Card from './components/Card.vue'
import Add from './components/Add.vue'

export default {
    name: 'Report',
    components: {
        Card,
        Add
    },
    setup() {
        const stus = ref([
            { name: '张三', age: 20, sex: '男', score: { yw: 80, sx: 89, yy: 90 }, avatar: require('@/assets/img/avatar' + Math.floor(Math.random() * 10) + '.png'), },
            { name: '李四', age: 20, sex: '男', score: { yw: 88, sx: 46, yy: 74 }, avatar: require('@/assets/img/avatar' + Math.floor(Math.random() * 10) + '.png'), },
            { name: '王五', age: 20, sex: '男', score: { yw: 60, sx: 77, yy: 87 }, avatar: require('@/assets/img/avatar' + Math.floor(Math.random() * 10) + '.png'), },
            // Math.random() 静态方法返回一个大于等于 0 且小于 1 的伪随机浮点数，并在该范围内近似均匀分布，然后你可以缩放到所需的范围。
            // Math.floor() 函数总是返回小于等于一个给定数字的最大整数。
        ]);
        const openDrawer = function() {
            show.value = true
        };
        const show = ref(false);
        const add = function(stu) {
            stus.value.push(stu);
            show.value = false;
        }

        return {
            show,
            stus,
            openDrawer,
            add
        }
    }
}
</script>

<style>
.addBtn {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 80px;
}
#app {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
</style>